<template>
    <div class="page-wrap">
        <!-- <div style="color: rgb(27, 76, 184);margin-bottom: 15px">
            <div class="addressIcon"></div>
            <span>当前位置：</span>
            <span style="cursor: pointer" @click="returnImage($route.params.page)">{{ pageTitle }}管理</span>
            <Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
            <span style="color: #333">{{titleText}}</span>
        </div> -->
        <div class="page-content" :style="{height:contentHei}">
            <div class="img-header">
                <div style="font-weight: 700;font-size: 18px">{{titleText}}</div>
            </div>
            <Divider />
            <div class="content-wrap">
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120" style="width: 500px">
                    <FormItem label="名称" prop="name">
                        <Input v-model.trim="formValidate.name" placeholder='不能包含下列任意英文字符 \ / : * ? " < > |，名称长度为1-128个字符'></Input>
                    </FormItem>
                    <FormItem label="方向" prop="direction">
						<i-select v-model="formValidate.direction" placeholder="方向" @on-change="changeDirection">
							<i-option v-for="(value,key) in expClassifyLevel1" :value="value.dictid" :key="key">{{value.dictname}}</i-option>
						</i-select>
					</FormItem>
					<FormItem label="类型" prop="typeCode">
						<i-select v-model="formValidate.typeCode" placeholder="类型">
							<i-option v-for="(value,key) in expClassifyLevel2" :value="value.dictid" :key="key">{{value.dictname}}</i-option>
						</i-select>
					</FormItem>
                    <FormItem label="难度" prop="difficulty">
                        <RadioGroup v-model="formValidate.difficulty">
                            <Radio label="Simple">简单</Radio>
                            <Radio label="Medium">中等</Radio>
                            <Radio label="Hard">较难</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="可见范围" prop="isPublic">
                        <!-- <RadioGroup v-model="formValidate.isPublic" @on-change="changePublic">
                            <Radio :label="1">单位</Radio>
                            <Radio :label="0">个人</Radio>
                        </RadioGroup> -->
                        <RadioGroup v-model="formValidate.isPublic">
                            <Radio :label="1">单位</Radio>
                            <Radio :label="0">个人</Radio>
                        </RadioGroup>
                        <span v-if="!isCreate" style="color:#f90;position:absolute;white-space: nowrap;"> <Icon type="ios-information-circle-outline" />可见范围由个人修改为单位时，课件使用的个人资源(视频、图片)的可见范围将变为单位</span>
                    </FormItem>
                    <FormItem label="是否自学" prop="selfType">
                        <RadioGroup v-model="formValidate.selfType">
                            <Radio :label="0">否</Radio>
                            <Radio :label="1">是</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="视频" prop="videoFileRecordId" v-show="showImgItem">
                        <Button type="primary" ghost @click="searchFileName='';searchFilePublic='';videoPage = 1;getVideoList1('videos')">选择</Button>
                        <div class="chose-wrap" v-show="useVideoName != ''">
                            <div style="display: flex;justify-content: flex-start;align-items: center">
                                <img src="../../assets/exper/guide.png" class="chose-s2-icon">
                                <div class="chose-name">{{useVideoName}}</div>
                            </div>
                            <img src="../../assets/globalIcon/dis-del.png" style="width: 13px;height: 14px;cursor: pointer" @click="clearVideo">
                        </div>
                    </FormItem>
                    <FormItem label="封面图片" prop="logoFileRecordId" v-show="showImgItem">
                        <Button type="primary" ghost @click="searchFileName='';searchFilePublic='';videoPage = 1;getVideoList('images')">选择</Button>
                        <div class="chose-wrap" v-show="useImageName != ''">
                            <div style="display: flex;justify-content: flex-start;align-items: center">
                                <!--<img src="../../assets/exper/guide.png" class="chose-s2-icon">-->
                                <div class="chose-name">
                                	<!--{{useImageName}}-->
                                	<img :src="handleImage(useImagePath)" style="display:inline-block;height:40px;width:auto;vertical-align: middle;">
                                </div>
                            </div>
                            <img src="../../assets/globalIcon/dis-del.png" style="width: 13px;height: 14px;cursor: pointer" @click="clearImg">
                        </div>
                    </FormItem>
                    <FormItem label="描述" prop="description">
                        <Input v-model.trim="formValidate.description" type="textarea" :maxlength="200" :autosize="{minRows: 2,maxRows: 5}" placeholder="描述"></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="submitBtn('formValidate')" :loading="creatSceneLoading">确定</Button>
                        <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
        <!--工程模板-->
        <!--图片列表-->
        <DrawerPage  
            v-model="imgModal"
            select
            :title="selectType == 'images' ? '封面图片' : '视频文件'" 
            :columns="getShowVideoCol()" 
            :data="videoList"
            :loading="fileListLoading"
            :total="videoTotal"
            :size.sync="videoPageSize"
            :page.sync="videoPage"
            @queryFun="getVideoList(selectType)"
        >
            <ResourseUsageIllustrate type="学习视频" slot="rule"></ResourseUsageIllustrate>
            <template slot="search">
                <i-select clearable v-model="searchFilePublic" placeholder="可见范围" style="width: 150px;margin-left: 15px" @on-change="searchFile">
                    <i-option value="range">平台</i-option>
                    <i-option value="system">系统</i-option>
                    <i-option value="company">单位</i-option><i-option value="person">个人</i-option>
                </i-select>
                <Input v-model.trim="searchFileName" :placeholder="selectType == 'images' ? '图片名称': '视频名称'" style="width: 180px;" clearable @on-change="searchFile"/>
                <Button class="header-btn" type="primary" ghost style="height: 32px;margin-left: 5px;" @click="refreshImg()"><i class="el-icon-refresh-right" /></Button>
            </template>
        </DrawerPage>
        <!-- <Drawer :closable="true" :mask-closable="false" width="1000"
                v-model="imgModal" class="deviceDrawer">
                <div style="position: absolute;top: 70px;left: -17px;cursor: pointer" @click="closeImgModalBtn">
                    <img src="../../assets/globalIcon/closeIcon.png" alt="Close">
                </div>
                    <div style="display: flex;justify-content: flex-start;align-items: center">
                        <div style="height: 8px;width: 8px;border-radius: 50%;background-color: #333"></div>
                        <div style="margin-left: 5px;font-size: 18px;font-weight: 700">
                            <span v-if="this.selectType == 'images'">请选择封面图片</span>
                            <span v-if="this.selectType == 'videos'">请选择视频文件</span>
                            <ResourseUsageIllustrate type="学习视频"></ResourseUsageIllustrate>
                        </div>
                    </div>
                  <ColPage class="hp100" divider>
                    <template slot="top">
                        <div style="margin-left: 15px;font-size: 14px;font-weight: bold">
                            <span v-if="this.selectType == 'images'">封面图片</span>
                            <span v-if="this.selectType == 'videos'">视频文件</span>
                        </div>
                        <div>
                            <i-select clearable v-model="searchFilePublic" placeholder="可见范围" style="width: 150px;margin-left: 15px" @on-change="searchFile">
                                <i-option value="range">平台</i-option>
                                <i-option value="system">系统</i-option>
                                <i-option value="company">单位</i-option><i-option value="person">个人</i-option>
                            </i-select>
                            <Input v-model.trim="searchFileName" :placeholder="selectType == 'images' ? '图片名称': '视频名称'" style="width: 180px;" clearable @on-change="searchFile"/>
                            <Button class="header-btn" type="primary" ghost style="height: 32px;margin-left: 5px;" @click="refreshImg()"><i class="el-icon-refresh-right" /></Button>
        
                        </div>
                    </template>
                    <template slot="content">
                        <TableList
                            drawer
                            :columns="getShowVideoCol()" 
                            :data="videoList"
                            :loading="fileListLoading"
                            :total="videoTotal"
                            :size.sync="videoPageSize"
                            :page.sync="videoPage"
                            @change-page="videoOnChange"
                        >
                        </TableList>
                    </template>
                </ColPage>
        </Drawer> -->
    </div>
</template>
<script>
    import $ from 'jquery'
    import encryption from '@/libs/encryption.js'
    import { mapMutations, mapState } from 'vuex';
    import {experType} from '@/api/dict.js'
    import {addStudyVideo,modifyStudyVideo,queryStudyVideo} from '@/api/videoSelfStudy.js'
    import {getFilesData} from '@/api/uploadFile.js'
    import ResourseUsageIllustrate from '@/components/resourse-usage-illustrate'
    import { validateName,validateName128 } from '@/libs/reg'
    import { getIconData } from '@/api/icon.js'
    export default {
    	name:'CreateLearnVideo',
        components:{ResourseUsageIllustrate},
        data () {
            const validateMinram = (rule,value,callback) => {
                let val = parseInt(value)
                if(val > 0){
                    callback()
                }else {
                    callback(new Error('Please enter the hours'))
                }
            }
            const directionValidator = (rule,value,callback)=>{
                if(!this.formValidate.direction){
                    callback(new Error('方向不能为空'));
                }else{
                     callback()
                }
               
            }
            return {
                // 用户信息
                userName:'',
                USER_ID:'',
                // 页面设置
                fullHeight: document.documentElement.clientHeight,
                fullWidth: document.documentElement.clientWidth,
                contentHei:'auto',
                upLoadIconUrl:`${this.baseURL}/virtual/icon/fileUpload`,
                // 先判断状态
                isCreate:true,
                receiveData:{},
                showImgItem:true,
                // 页面标题
                titleText:'',
                // 表单
                formValidate: {
                	creator:'',
                	creatorName:'',
                    name: '',
                    direction:'',
                    typeCode: '',
                    difficulty: 'Simple',
                    isPublic:1,
                    selfType: 0,
                    description: '',
                    videoFilePath: '',
  					videoFileRecordId: '',
  					videoFileName: '',
  					logoFileName: '',
  					logo: '',
  					logoFileRecordId: '',
  					duration:''
                },
                ruleValidate: {
                    name: [
                        { required: true, max:128,message: '视频名称长度为1-128个字符', trigger: 'change' },
                        { validator: validateName128, trigger: 'change' }
                    ],
                    direction: [
                        { required: true, message: '方向不能为空', trigger: 'change' },
                         {validator:directionValidator}
                    ],
                    typeCode: [
                        { required: true, message: '类型不能为空', trigger: 'change' }
                    ],
                    difficulty: [
                        { required: true, message: '难度不能为空', trigger: 'change' }
                    ],
                    isPublic: [
                        { required: true, type:'number',message: '可见范围不能为空', trigger: 'change' }
                    ],
                    selfType: [
                        { required: true, message: '是否自学不能为空', type: 'number', trigger: 'change' }
                    ],
                    videoFileRecordId: [
                        { required: true, message: '视频不能为空 ', trigger: 'change' }
                    ],
//                  logoFileRecordId: [
//                      { required: true, message: 'The logo cannot be empty', trigger: 'change' }
//                  ],
                },
                creatSceneLoading:false,
                useExpguideId:'',
                useImagePath:'',
                useImageName:'',
                useVideoName:'',
                useVideoPath:'',
                // 课件分类
				expClassify: [],
				expClassifyLevel1: [],
				expClassifyLevel2: [],
                // 工程模板
                setUserTableHei:'700',
                shareStatus:'all',
                // 图片
                imgModal:false,
                videoPage:1,
                videoPageSize:14,
                videoList:[],
                videoTotal:0,
                videoCol:[
                    {
                        title:'名称',
                        key:'originName',
                        align:'center',
                        // render:(h,params)=>{
                        //     let fileName = params.row.originName
                        //     fileName = fileName.split('.')[0]
                        //     return h('div',fileName)
                        // }
                    },
                    {
                    	title:'缩略图',
                    	key:'path',
                    	align:'center',
                    	render:(h,params) => {
                    		if(params.row.fileCatalog == 'images'||(this.$route.name=='creatLearnVideo'&&params.row.path)){
                    			return h('img',{
	                    			attrs:{
	                    				src:this.handleImage(params.row.path)
	                    			},
		                    		style:{
	                    				display:'inline-block',
	                    				maxHeight:'40px',
	                    				width:'auto',
	                    				verticalAlign:'middle'
	                    			}
	                    		})
                    		}else{
                    			return h('span','-')
                    		}
                    	}
                    },
                    // {
                    //     title:'ID',
                    //     key:'id',
                    //     align:'center',
                    // },
                    // {
                    //     title:'类型',
                    //     key:'bucket',
                    //     align:'center',
                    //     width:80,
                    // },
                    {
                        title:'可见范围',
                        key:'visibility',
                        align:'center',
                        width:80,
                        render:(h,params) => {
                        	return h('span',{
                        		style:{
                        			color:this.handlePublic(params.row.visibility).color
                        		}
                        	},this.handlePublic(params.row.visibility).text)
                        }
                    },
                    {
                        title:'内容',
                        key:'check',
                        align:'center',
                        width:100,
                        render: (h, params) => {
                            return h('div', [
                                h('a', {
                                    on:{
                                        click:()=>{
                                            this.checkInfo(params);
                                        }
                                    }
                                }, '查看')
                            ]);
                        }
                    },
                    {
                        title:'创建者',
                        key:'creatorName',
                        align:'center',
                    },
                    {
                        title:'创建时间',
                        key:'created',
                        align:'center',
                    },
                    {
                        title:'操作',
                        key:'action',
                        width:100,
                        align:'center',
                        render:(h,params)=>{
                            let text = ''
                            if(params.row.imgUseFlag){
                                text = '已用'
                            }else {
                                text = '使用'
                            }
                            let status = this.getResourceDisStatus(params.row.visibility === 'private',params.row.creator);
//                          (this.formValidate.isPublic == 1 || (!this.isOwn && this.formValidate.creator !== params.row.creator)) && params.row.visibility == 'private'
                            return h('a',{
                                style: {
                                    'display': 'flex',
                                    'justify-content': 'flex-start',
                                    'align-items': 'center',
                                    color:params.row.imgUseFlag?'#2f70ff':'grey',
                                    cursor:status ? 'not-allowed' : 'pointer'
                                }
                            },[
                                h('div', {
                                    on: {
                                        'click': ()=>{
                                        	if(status){
                                        		return; 
                                        	}
                                            this.chooseImg(params)
                                        },
                                    },
                                    style:{
                                        'margin-left':'15px'
                                    }
                                }, [
                                    h('img', {
                                        attrs: {
                                            src: params.row.imgUseFlag?require('../../assets/globalIcon/choosed.png'):require('../../assets/globalIcon/add.png'),
                                        },
                                        style: {
                                            'margin-right':'5px',
                                            'vertical-align': 'middle',
                                            width:'16px',
                                            height:'16px',
                                            display:'inline-block',
                                        },
                                    }),
                                    h('span',{},text)
                                ])
                            ])
                        }
                    },
                ],
                fileListLoading:false,
                searchFileName:'',
                searchFilePublic:'',
                selectType:''
            }
        },
        computed:{
            ...mapState('style', {
            drawerFolderImage: ({ themeConfig }) => {
                return themeConfig.drawerFolderImage;
                }
            }),
        	isOwn:function(){ //是否是自己的（修改别人的课件不允许选择个人资源）
        		return (this.USER_ID == this.formValidate.creator) || this.isCreate 
            },
            pageTitle () {
                //当前菜单显示名
                return this.$route.meta.title;
            },
        },
        created(){
            // 获取用户id
            let November = sessionStorage.getItem('November')
            November = JSON.parse(encryption.SelfUseDecrypt(November))
            this.USER_ID = November.userId
            this.userName = November.userName
            this.formValidate.creator = this.USER_ID;
            this.formValidate.creatorName = this.userName;
        },
        mounted(){
        	this.classification().then(() => {
	            // 是创建还是修改
	            if(!this.$route.query.id){
	                this.isCreate = true
	                this.titleText = '创建理论课件'
	                this.showImgItem = true
	            }else{
	                this.isCreate = false
	                this.titleText = '修改理论课件'
	                this.showImgItem = true;
	                this.getVideoInfo();
	            }
                this.addBreadItem({ name: this.titleText });
            })
            // this.setStyle()
            // window.onresize = () => {
            //     this.setStyle()
            // }
        },
        beforeRouteLeave(to, from, next) {
			if(to.path === '/videoLearn') {
				//to.query.page = this.$route.query.page
				next()
			} else {
				//跳转至非课件页面，清空存储的查询条件
				sessionStorage.removeItem("queryObj");
				next()
			}
		},
        methods:{
            // 设置高度
            setStyle(){
                window.fullHeight = document.documentElement.clientHeight;
                window.fullWidth = document.documentElement.clientWidth;
                this.fullHeight = window.fullHeight;
                this.fullWidth = window.fullWidth;
                this.contentHei =   this.fullHeight - 60 - 21 +'px'  // 80是头部高度  60是上下padding
                this.setUserTableHei = this.fullHeight - 212
                this.videoPageSize = Math.floor(this.setUserTableHei/50) - 1
            },
            // 返回icon管理
            returnImage(page){
                this.$router.push({
                    name: 'videoLearn',
                    params:{
                    	page:page
                    }
                })
            },
            getShowVideoCol() {
				if(this.selectType != 'images') {
					return this.videoCol.filter(col => col.key != 'path');
				} else {
					return this.videoCol;
				}
			},
            getDirection(type){
				let types = this.expClassify.filter(dict => dict.dictid == type);
				if(types.length > 0){
					let parentTypes = this.expClassify.filter(dict => dict.dictid == types[0].parentid);
					return parentTypes.length > 0 ? parentTypes[0].dictid : ''
				}else{
					return ''
				}
			},
			getResourceDisStatus(isPrivate,creator){
				let isNotOwn = !(this.USER_ID == this.formValidate.creator || this.isCreate); 
				let isNotCommonCreator = this.formValidate.creator !== creator;
				return (this.formValidate.isPublic == 1 || (isNotOwn && isNotCommonCreator)) && isPrivate
			},
            // 提交按钮
            submitBtn(name){
                if(this.isCreate){
                    this.submitExpSceneBtn(name)
                }else {
                    this.modifySubmit(name)
                }
            },
            getVideoInfo(){
            	let params = {
            		pageIndex:1,
            		pageSize:1,
            		id:this.$route.query.id
            	}
            	queryStudyVideo(params).then(data => {
            		if(data.code == 1 && data.data.items.length > 0){
	            		let videoInfo = data.data.items[0];
	            		this.receiveData = videoInfo;
                        this.formValidate.selfType = videoInfo.selfType || 0
	            		this.useImageName = videoInfo.logoFileName;
		                this.useVideoName = videoInfo.videoFileName;
		                this.formValidate = videoInfo;
		                this.useImagePath = videoInfo.logo;
		                this.useVideoPath = videoInfo.videoFilePath;
		                let direction = this.getDirection(videoInfo.typeCode)
						this.expClassifyLevel2 = this.expClassify.filter(dict => dict.parentid == direction);
						this.formValidate.direction = direction
					}else if(data.code != 1){
						this.$Message.error({
							content: data.message,
							duration: 3,
						})
					}
            	})
            },
            // 创建提交
            submitExpSceneBtn(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let formData = JSON.parse(JSON.stringify(this.formValidate));
                        this.creatSceneLoading = true
                        addStudyVideo(formData)
                            .then((data)=>{
                                if(data.code == 1){
                                    this.$Message.success({
                                        content:'理论课件创建成功！',
                                        duration:3,
                                    });
                                    this.handleReset('formValidate')
                                    setTimeout(()=>{
                                        this.returnImage(1)
                                    })
                                }else {
                                    this.$Message.error({
                                        content:data.message,
                                        duration:3,
                                    })
                                }
                                this.creatSceneLoading = false
                            })
                            .catch((err)=>{
                                this.creatSceneLoading = false
                                console.log(err)
                            })
                    } else {
                        this.$Message.error('请完善信息!');
                    }
                })
            },
            // 修改提交
            modifySubmit(name){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                    	let receiveData = JSON.parse(JSON.stringify(this.formValidate));
                        modifyStudyVideo(receiveData)
                            .then(data=>{
                                if(data.code == 1){
                                    this.$Message.success({
                                        content:'修改成功！',
                                        duration:3,
                                    });
                                    this.handleReset('formValidate')
                                    setTimeout(()=>{
                                        this.returnImage(this.$route.params.page)
                                    })
                                }else {
                                    this.$Message.error({
                                        content:data.message,
                                        duration:3,
                                    });
                                }
                            })
                            .catch(err=>{
                                console.log(err)
                            })
                    } else {
                        this.$Message.error('请完善信息!');
                    }
                })
            },
            // 重置
            handleReset (name) {
                this.useImagePath =  ''
                this.useImageName = '';
                this.useVideoName = '';
                this.useVideoPath = '';
                this.$refs[name].resetFields();
            },
            // 获取场景分类
			classification() {
				return new Promise((resolve,reject) => {
					experType()
					.then((data) => {
						if(data.code == 1) {
							let attribute = data.attribute;
							this.expClassify = attribute.attribute[0].dictEntryList;
							this.expClassifyLevel1 = attribute.attribute[0].dictEntryList.filter(dict => !dict.parentid);
							this.expClassifyLevel2 = attribute.attribute[0].dictEntryList.filter(dict => dict.parentid);
							resolve(data.attribute);
						}else{
							resolve();
						}
					})
					.catch((err) => {
						resolve();
						console.log(err)
					});
				})
			},


// 选择视频
          getVideoList1(type){
            this.fileListLoading = true;
            return new Promise((resolve,reject) => {
              this.selectType = type;
              if(type){
                this.imgModal = true
              }
              let params = {
                pageIndex:this.videoPage,
                pageSize:this.videoPageSize,
              }
              let data = {
                bucket:type, //'images'
//                  visibility:1
              }
              if(!type){
                params.rows = 2147483647
              }
              if($.trim(this.searchFileName) != ''){
                data.originName = $.trim(this.searchFileName)
              }
              if($.trim(this.searchFilePublic) != ''){
                data.visibility = $.trim(this.searchFilePublic)
              }
              getFilesData(params,data)
              .then((res)=>{
                if(res.data.code == 1){
                  let attribute = res.data.data;
                  let items = attribute.list;
                  this.videoTotal = attribute.total;
                  for(let i=0;i<items.length;i++){
                    items[i].imgUseFlag = false
                    if(items[i].path === this.useImagePath || items[i].path === this.useVideoPath){
                      items[i].imgUseFlag = true
                    }
                  }
                  this.videoList = items;
                  resolve(items)
                }
                this.fileListLoading = false
              })
              .catch((err)=>{
                this.fileListLoading = false
              })
            })
          },
            // 选择图片
            getVideoList(type){
            	this.fileListLoading = true;
            	return new Promise((resolve,reject) => {
            	this.selectType = type;
            	if(type){
            		this.imgModal = true
            	}
//                 let params = {
//                     pageIndex:this.videoPage,
//                     pageSize:this.videoPageSize,
//                 }
//                 let data = {
//                 	bucket:type, //'images'
// //                  visibility:1
//                 }
                if(!type){
                	params.pageSize = 2147483647
                }
                let params = {
                    pageIndex: this.videoPage,
                    pageSize: this.videoPageSize,
                    self:0
                };
                let data = {
                    type:'Covertitle',
                    self:0
                };
                if($.trim(this.searchFileName) != ''){
                    data.name = $.trim(this.searchFileName)
                }
                if($.trim(this.searchFilePublic) != ''){
                	data.visibility = $.trim(this.searchFilePublic)
                }
                getIconData(data,params)
                    .then((res)=>{
                        if(res.data.code == 1){
                            let attribute = res.data.data;
                            let items = attribute.items;
                            this.videoTotal = attribute.total;
                            for(let i=0;i<items.length;i++){
                                items[i].originName = items[i].name
                                items[i].path = items[i].path.replace('/files/','')
                                items[i].imgUseFlag = false
                                if(items[i].path === this.useImagePath || items[i].path === this.useVideoPath){
                                    items[i].imgUseFlag = true
                                }
                            }
                            this.videoList = items;
                            resolve(items)
                        }
                        this.fileListLoading = false
                    })
                    .catch((err)=>{
                        this.fileListLoading = false
                    })
                })
            },
            videoOnChange(val){
                this.videoPage = val;
                this.getVideoList(this.selectType);
            },
            searchFile(val){
                this.videoPage = 1
                this.getVideoList(this.selectType);
            },
            changeDirection(val){
				if(val == 'All'){
					this.expClassifyLevel2 = this.expClassify.filter(dict => dict.parentid);
				}else{
					this.expClassifyLevel2 = this.expClassify.filter(dict => dict.parentid == val);
				}
				this.formValidate.typeCode = '';
			},
            refreshImg(){
                this.videoPage = 1
                this.searchFileName = ''
                this.searchFilePublic = ''
                this.getVideoList(this.selectType)
            },
            closeImgModalBtn(){
                this.imgModal = false
            },
            checkInfo(params){
                let path = params.row.path;
                window.openTrain(`/api/minio/filePreview?path=${path}`);
            },
            chooseImg(params){
            		if(params.row.imgUseFlag){
            			if(this.selectType == 'images'){
		                    this.$Message.info({
		                        content:'已使用该图片！',
		                        duration:3,
		                    })
		                }else{
		                	this.$Message.info({
		                        content:'已使用该视频！',
		                        duration:3,
		                    })
		                }
	                }else {
	                    let _index = params.row._index
	                    for(let i=0;i<this.videoList.length;i++){
	                        this.videoList[i].imgUseFlag = false
	                    }
	                    this.$set(this.videoList[_index],'imgUseFlag',true)
	                    if(this.selectType == 'images'){
	                    	this.formValidate.logoFileRecordId = params.row.id;
	                    	this.formValidate.logo = params.row.path;
	                    	this.formValidate.logoFileName = params.row.originName;
	                    	this.useImagePath =  params.row.path;
	                    	this.useImageName =  params.row.originName;
	                    }else{
	                    	this.formValidate.videoFileRecordId = params.row.id;
                            this.$refs.formValidate.validateField('videoFileRecordId');
	                    	this.formValidate.videoFilePath = params.row.path;
	                    	this.formValidate.videoFileName = params.row.originName;
	                    	this.useVideoPath =  params.row.path;
	                    	this.useVideoName =  params.row.originName;
	                    	this.formValidate.duration = params.row.duration;
	                    }
	                }
            },
            // 清空选择的图片
            clearImg(){
                this.formValidate.logoFileRecordId = '';
            	this.formValidate.logo = '';
            	this.formValidate.logoFileName ='';
            	this.useImagePath =  '';
            	this.useImageName = '';
            },
            //清空选择的视频
            clearVideo(){
                this.formValidate.videoFileRecordId = '';
            	this.formValidate.videoFilePath = '';
            	this.formValidate.videoFileName ='';
            	this.useVideoPath =  '';
            	this.useVideoName =  '';
            	this.formValidate.duration = '';
                this.$refs.formValidate.validateField('videoFileRecordId');
            },
            handleImage(logo){
                let src = ''
                if(logo){
                    if(logo.indexOf('Learn') > -1){
                        src = logo
                    }else {
                        src = `/Learn/${logo}`
                    }
                }else {
                    src = this.defaultImg
                }
                return src
            },
            handlePublic(val){
                let obj = {
                    text:'',
                    color:'#8d95a6'
                }
                switch (val){
                    case 'person':
                        return obj = {
                            text:'个人',
                            color:'rgb(255, 165, 0)',
                        }
                        break;
                    case 'company':
                        return obj = {
                            text:'单位',
                            color:'rgb(50, 205, 50)',
                        }
                        break;
                    case 'system':
                        return obj = {
                            text:'系统',
                            color:'rgb(65, 105, 225)',
                        }
                        break;
                  case 'range':
                  case 3:
                  case '3':
                    return obj = {
                      text:'平台',
                      color:'#ff61f4',
                    }
                    break;
                }
            },
            changePublic(){
            	this.formValidate.logoFileRecordId = '';
            	this.formValidate.logo = '';
            	this.formValidate.logoFileName = '';
            	this.useImagePath =  '';
            	this.useImageName =  '';
            	this.formValidate.videoFileRecordId = '';
            	this.formValidate.videoFilePath = '';
            	this.formValidate.videoFileName = '';
            	this.useVideoPath =  '';
            	this.useVideoName =  '';
            	this.formValidate.duration = '';
            }
        }
    }
</script>
<style scoped>
    .page-content{
        background-color: var(--card-body-bgcolor);
        border-radius: 10px;
    }
    .img-header{
        display: flex;
        justify-content: space-between;
        padding: 20px 20px 0 20px;
    }
    .addressIcon{
        display: inline-block;
        height: 14px;
        width: 12px;
        background: url("../../assets/globalIcon/addressIcon.png") no-repeat center;
        background-size: 100% 100%;
        margin-bottom: -1px;
    }
    .content-wrap{
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0 20px;
        height: calc(100% - 96px);
    }
    .chose-wrap{
        display: flex;
        justify-content: space-between;
        padding: 3px 8px;
        background-color: var(--table-tr-hover-color);
        align-items: center;
        margin-top: 10px;
    }
    .chose-name{
        width: 300px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
    }
    .chose-s-icon{
        width: 15px;
        height: 17px;
        display: inline-block;
        margin-bottom: 1px;
        margin-right: 10px;
    }
    .chose-s2-icon{
        width: 13px;
        height: 15px;
        display: inline-block;
        margin-bottom: 1px;
        margin-right: 10px;
    }
    .deviceDrawer{
        position: relative;
    }
</style>
<style>
    .deviceDrawer .ivu-drawer-body{
        overflow: inherit;
    }
    .content-wrap .ivu-form-item{
        margin-bottom: 20px;
    }
</style>
